<template>
  <datePicker
    :options="calendarArr"
    class="calendar"
    @handleClickDay="handleClickDay"
    @handlePrevMonth="handlePrevMonth"
    @handleNextMonth="handleNextMonth"
    :resources="resources"
  >
    <div slot="resourcesBody" slot-scope="item">
      {{ item }}
    </div>
  </datePicker>
</template>

<script>
import datePicker from "./components/date-picker";
export default {
  name: "date-picker",
  data() {
    return {
      calendarArr: {
        type: "combination",
        headStyle: {
          todayBtn: "right",
          combination: "center",
          checkBtn: "right",
        },
        viewStyle: {
          day: "right",
        },
        calendarData: [],
      },
      /** 渲染数据 */
      resources: [
        { sid: 1, date: "2021-04-28", name: "111" },
        { sid: 2, date: "2021-04-29", name: "222" },
        { sid: 3, date: "2021-04-30", name: "222" },
        { sid: 4, date: "2021-04-30", name: "333" },
      ],
    };
  },
  components: {
    datePicker,
  },
  methods: {
    handleClickDay(item) {
      console.log(item, "dianji ");
    },
    handlePrevMonth() {},
    handleNextMonth() {},
  },
};
</script>

<style>
</style>
